<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王佳佳">
    <title>星级评分</title>
    <style>
        *
        {
            box-sizing: border-box;
        }
        a
        {
            color: inherit;
            font-size: inherit;
            text-decoration: none;
        }
        .box
        {
            display: flex;
        }
        .box>div
        {
            margin-left: 10px;
            position: relative;
        }
        a
        {
            display: inline-block;
            width: 19px;
            height: 19px;
            background-image: url(star.png)
        }
        a.active
        {
            background-position: 0 -28px;
        }
        .box>div:hover .pingjia
        {
            display: block;
        }
        .pingjia
        {
            border: 1px solid gray;
            font-size: 12px;
            position: absolute;
            left: 0;
            top: 20px;
            width: 120px;
            display: none;
        }
    </style>
</head>
<body>

    <div class="box">
        <span>宝贝与描述相符</span>
        <div>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <div class="pingjia">五星好评</div>
        </div>
        <span class="result"></span>
    </div>
    <script src="./jquery.js"></script>
</body>
</html>

<script>
    var msg = 
    [
        "很不满意|差得太离谱,与卖家描述的严重不符，非常不满",
        "不满意|部分有破损,与卖家描述的不符，不满意",
        "一般|质量一般,没有卖家描述的那么好",
        "满意|质量不错,与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好,与卖家描述的完全一致，非常满意"
    ];

    //亮星
    function showstar(starnum)
    {
        $('a').each(function(index)
        {
            if (index < starnum) 
            {
                $(this).addClass('active');
            } 
            else 
            {
                $(this).removeClass('active');
            }
        })
    }
    
    var count = 0;
    var num = 0;
    // console.log(count);
    $('a').each(function()
    {
        //鼠标触摸展示
        $(this).mouseenter(function()
        {
            count = $(this).index();
            showstar(count + 1);
            $('.pingjia').css('left',$(this).position().left);
            var amsg = msg[$(this).index()];
            $('.pingjia').html('<strong style="color:red">'+(count+1)+'分'+'&nbsp;'
                + amsg.split('|')[0]+'</strong>'  +  '<br>' + amsg.split('|')[1]);
        });
        //鼠标点击事件
        $(this).click(function()
        {
            num = $(this).index() + 1;
            var amsg = msg[$(this).index()];
            $('.result').html('<strong style="color:red">' + (num)+'分'+'</strong>' 
                + '&nbsp;' + amsg);
        });
        $(this).mouseleave(function()
        {
            showstar(num);
        });
    });




</script>




















    <!-- // // 鼠标点击 记录分数

    // $('a').click(function () {
    //     score = $(this).index() + 1;
    //     var amsg = msg[$(this).index()];
    //     $('.result').html(
    //         '<strong style="color:red">'
    //         + ($(this).index() + 1) +
    //         '分<>' +
    //         amsg.split('|')[1]
    //     )
    // })
   
    // $('a').mouseout(function () {
    //     showStar(score);
    // }) -->
